<!DOCTYPE html>
<html lang="en">
<head>
	<title>fitLine</title>
    <meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="fitline.css">
    <link rel="stylesheet" href="reset.css">
</head>
<body>
	<!-- 导航栏部分 -->
    <div class="header">
        <div class="header-inner">
        	<div class="navbar">
        		<a href="#">HOME PAGE</a>
        	</div>
        	<div class="navbar"> 
        		<a href="#">NUTRITION</a>
        	</div> 
        	<div class="navbar">
        		<a href="#">BEST DIETS</a>
        	</div>
        	<div class="navbar">
        		<a href="#">PROGRAMS</a>
        	</div>
        	<div class="navbar">
        		<a href="#">CONTACTS</a>
        	</div>
        </div>
    </div>

    <!-- 广告 banner 部分，包括搜索栏，logo等。 -->
    <div class="banner">
    	<div class="banner-inner">
            <a class="logo" href="#"></a>
            <input style="width:226px;height:34px" type="text" placeholder="SEARCH" >
    	</div>
        <img class="banner-pic" src="images/banner.png" alt="">
    </div>
    <!-- 主体content部分 -->
    <div class="clearfix content">
        <!-- 主体内部 inner -->
        <div class="clearfix content-inner">
            <!-- 主体左半部分 content-left，分为上半部分和下半部分，分别为con-left-top和con-left-bottom -->
            <div class="clearfix content-left">
                <h4>Weight-Loss Basics</h4>
                <div class="con-left-top"><!-- 左上 -->
                    <ul>
                        <li><a href="#">Count Calories</a></li>
                        <li><a href="#">Weight Loss Basics</a></li>
                        <li><a href="#">Health Eating</a></li>
                        <li><a href="#">Eating Out</a></li>
                        <li><a href="#">Nutrition</a></li>
                        <li><a href="#">About Diets</a></li>
                        <li><a href="#">Enotional Eating</a></li>
                        <li><a href="#">Exercise For Weight Loss</a></li>
                        <li><a href="#">Obesity and Health</a></li>
                    </ul>
                </div>
                <div class="con-left-bottom"><!-- 左下 -->
                    <h4> Recent Comments</h4>
                    <h5>Admin</h5>
                    "Nam libero tempore cum soluta nobis est eligendi optio c quominus id quod maxime.."
                    <h5>Guest 1</h5>
                    "Omnis voluptas assumenda est omnis dolor repeilendus.Tempoeibus  offciis debites aut return.." 
                    <h5>Guest 2</h5>
                    "Ut et ciidhuei dolor repeilendus.Tempoeibu fciis debites impedit quominus id quod return.."
                </div> 
            </div>
            <!-- 主体的右半部份 sidebar,首先分为上部分 side-top和side-bottom -->
            <div class="clearfix sidebar">
                <div class="side-top"><!-- 上部分 -->
                    <h4>Welcome to Fit Line!</h4>
                    <div class="clearfix side-top-content"> <!-- 上部分的内容    -->
                        <img class="fruits" src="images/fruits.png" alt="">
                        <div class="side-top-text"> 
                        <p style="font-weight:bold;margin:10px 0;">FitLine.com is one of <a class="" href="#">free website templatescreated</a>by TemplateMonster.com team.</p>
                        <p style="color:#808080;">This <a href="#">FitLine Template</a>goes with two package - with PSD source files are avalible for free for the registed members.PSD source avalible for free for of Templatemonsters.com.The basic package is avaliable for anyone without registretion.<br>  
                        This website template has several pages: <a href="#">Home Page</a>,<a href="#">Nutrition</a>,<a href="#">Best Diets</a>,<a href="#">Programs</a>,<a href="#">Contacts</a>(note that contact us form - doesn't work).</p>
                        </div>
                        <div class="more">
                            <a href="#">Read More</a>
                        </div>
                    </div>       
                </div>
                <!-- 主体内容下半部分，又分为左半部分 side-bottom-left和右半部份 side-bottom-right.-->
                <div class="clearfix side-bottom">
                    <div class="clearfix side-bottom-left"><!-- 下左 -->
                        <h4>We Recommend</h4>
                        <h5>Weight Loss Diet</h5>
                        <p>At vero eos et accusamus et iusto dignissimos ducimus qui blanditis.</p>
                        <a href="#">Read More</a>
                        <h5>Help Me Lose Weight Fast</h5>
                        <p>Deleniti vero eos et accusamus et iusto dignissimos ducimus qui blanditis</p>
                        <a href="#">Read More</a>
                        <h5>Losing Weight Fast</h5>
                        <p>Similique at vero eos et accusamus et iusto dignissimos ducimus qui blanditis hsuhd hsudhif</p>
                        <a href="#">Read More</a>
                    </div>
                    <div class="clearfix side-bottom-right"><!-- 下右 -->
                        <h4>Popular Topics</h4>
                        <div class="topic topic-one">
                            <img src="images/sidebottompic.png" alt="">
                            <div class="topic-text topic-text-one">
                            <h5>Sed ut perspiciatis</h5>
                            At vero eos et accusamus et iusto ducimus.
                            <a href="#">Read More</a>
                            </div>
                        </div>
                        <div class="topic topic-two">
                            <img src="images/sidebottompictwo.png" alt="">
                            <div class="topic-text topic-text-two">
                            <h5>Neque porro quisquam</h5>
                            Deleniti accusamus et iusto eting ducimus.
                            <a href="#">Read More</a>
                            </div>
                        </div>
                        <div class="topic topic-three">
                            <img src="images/sidebottompicthree.png" alt="">
                            <div class="topic-text topic-text-three">
                            <h5>Dolorem ipsum</h5>
                            Simillique sunt et iusto eting ducimus.
                            <a href="#">Read More</a>
                            </div>
                        </div>                             
                    </div>
                </div> 
            </div> 
        </div>
    </div>
    <!-- 最后版权声明等 -->
    <div class="clearfix footer">
        <p class="footer-oneline">FitLine.com © 2011</p>
        <p><a style="text-decoration:none;" href="#">Website Template</a>by TemplateMonster.com</p>
        <p>Popular free web template <a href="#">at www.Website TemplatesOnline.com</a>.<a href="#">GetJoomla TemplatesFree.com</a>-free Joomla themes for websites.</p>
    </div>
</body>
</html>